import React, { memo } from 'react';
import { useSelector, shallowEqual } from "react-redux";

import { formatImageSize, formatMonthDay } from "@/utils/format-utils";

import { HeaderWrapper } from "./style";
import RankingOperationBar from "@/components/ranking-operation-bar";

const RankingHeader = memo(() => {
  const { listInfo } = useSelector(state => ({
    listInfo: state.getIn(["ranking", "listInfo"])
  }), shallowEqual);

  return (
    <HeaderWrapper>
      <div className="image">
        <img src={formatImageSize(listInfo.coverImgUrl, 150)} alt="" />
        <span className="image_cover">封面</span>
      </div>

      <div className="info">
        <div className="title">{ listInfo.name }</div>

        <div className="time">
          <i className="clock sprite_icon2"></i>
          <div>最近更新：{ formatMonthDay(listInfo.updateTime) }</div>
          <div className="update-f">（每日更新：TODO）</div>
        </div>

        <RankingOperationBar 
          favor={`(${listInfo.subscribedCount})`} 
          share={`(${listInfo.shareCount})`} 
          download="下载" 
          comment={`(${listInfo.commentCount})`} 
        />
      </div>
    </HeaderWrapper>
  )
})

export default RankingHeader